<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

  
<ui:composition template="../templates/template_menu.xhtml">
    
    <ui:define name="title">
        <f:loadBundle basename="org.me.resources.messages" var="msg"/>
        <h:outputText value="#{msg.paises}" />        
    </ui:define>
    
    <ui:define name="content">       
     <f:view>        
            <a4j:form id="form1">
               <rich:panel  style="margin-left: 30px;margin-top: 30px; width:490px;border:0px solid #14527e;border-radius: 20px;box-shadow:rgba(100,100,100,0.4)10px 10px ; height : 165px;" >
                  <br/>
                  <h:panelGrid columns="2" >
                      <h:outputText value="#{msg.buscarPaises}"  style="color: #999999;font-weight: bold;font-family: Tahoma;font-size: 13px;"  />			
                  </h:panelGrid>
                  <br/>                  
                  <h:panelGrid columns="2" >
                      <h:outputText value="#{msg.nompais2}" />
                      <h:inputText id="nompais" value="#{consultasPaisesController.nom_pais}"  required="false" maxlength="20" size="20" >                                        
                          <a4j:support event="onkeyup"  actionListener="#{consultasPaisesController.execute}" reRender="datable,panelNav,panelIrAPagina" />                            
                      </h:inputText>			
                  </h:panelGrid>
                  <br/>
                  <br/>
                  <h:panelGrid columns="2" >                      
                      <a4j:commandButton value=" #{msg.buscar} " id="btnBuscar" 					
                                                actionListener="#{consultasPaisesController.execute}" reRender="datable,panelNav,panelIrAPagina" styleClass="spacio">
			  <rich:toolTip for="btnBuscar" value="#{msg.buscar}" />
                      </a4j:commandButton>                 
                      <a4j:commandButton value=" #{msg.limpiar} "  id="btnLimpiar"  actionListener="#{consultasPaisesController.clean}" reRender="form1" styleClass="spacio"> 
                               <rich:toolTip for="btnLimpiar" value="Limpiar" />
		      </a4j:commandButton>                    
                  </h:panelGrid>                       
                  
               </rich:panel>
               <br />                
                    
               <rich:panel  style=" margin-left: 30px;border:0px solid #14527e;border-radius: 20px;box-shadow:rgba(100,100,100,0.4)10px 10px ;width:490px;height : 395px;" >
                 <div align="center" >
                    <h:panelGrid columns="2" id="panelNav">
                       <h:panelGrid columns="4"  style="visibility:#{consultasPaisesController.visPanelNav}">

                            <a4j:commandLink  disabled="#{consultasPaisesController.activeFirst}" actionListener="#{consultasPaisesController.executebyPage}" reRender="datable,panelNav" >
                                   <h:graphicImage value="/WEB-INF/imagenes/first2.PNG"/>
                                   <f:param name="page"  value="1" />
                            </a4j:commandLink>                                                                    

                            <a4j:commandLink  disabled="#{consultasPaisesController.activePrevious}" actionListener="#{consultasPaisesController.executebyPage}" reRender="datable,panelNav"  >
                                 <h:graphicImage value="/WEB-INF/imagenes/prev2.PNG"/>
                                 <f:param name="page"  value="#{consultasPaisesController.paginaActual - 1}" />
                            </a4j:commandLink>                         

                            <a4j:commandLink  disabled="#{consultasPaisesController.activeNext}" actionListener="#{consultasPaisesController.executebyPage}"  reRender="datable,panelNav" >
                                   <h:graphicImage value="/WEB-INF/imagenes/next2.PNG"/>
                                   <f:param name="page"  value="#{consultasPaisesController.paginaActual + 1}" />
                            </a4j:commandLink>

                            <a4j:commandLink disabled="#{consultasPaisesController.activeLast}" actionListener="#{consultasPaisesController.executebyPage}" reRender="datable,panelNav" >
                                   <h:graphicImage value="/WEB-INF/imagenes/last2.PNG"/>
                                   <f:param name="page"  value="#{consultasPaisesController.numeroPaginas}" />
                            </a4j:commandLink>    

                       </h:panelGrid>                    
                        
                       <!-- muestra la pagina actual del total de paginas -->
                       <h:outputText value="  #{consultasPaisesController.paginaActual} De #{consultasPaisesController.numeroPaginas} " id="numPage" 
                                      style="visibility:#{consultasPaisesController.visible}" styleClass="spacio"/>                     	
                    
                    </h:panelGrid>           
                 </div>
                 
                 <!-- caja de texto para escribir la pagina a la que se desea ir -->   
                 <!--  se usa visPanelNav ya que estan relacionados lso botones de navegacion con la caja de busqueda -->
                 <h:panelGrid id="panelIrAPagina" columns="2"  style="visibility:#{consultasPaisesController.visPanelNav}">
                    <h:outputText value="#{msg.irAPagina}" />
                    <h:inputText id="txtIrAPagina" value="#{consultasPaisesController.irAPagina}" required="false" maxlength="4" size="1" >                                                    
                            <a4j:support event="onkeyup"  actionListener="#{consultasPaisesController.executebyPage2}" reRender="datable,panelNav" />                               
                    </h:inputText>
                 </h:panelGrid>
                 
                 <!-- DataTable -->                  
                 <h:panelGrid columns="1" id="datable">                                             
                    <rich:dataTable id="mdr1" value="#{consultasPaisesController.beanList}"
		        var="item" rows="12" width="50%" dir="LTR" frame="hsides" styleClass="datatable"
			onRowMouseOver="this.style.backgroundColor='#c5dbf9'" onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
					rules="all" rowKeyVar="rowKey" cellspacing="5" rendered="#{not empty consultasPaisesController.beanList}">
					
					<f:facet name="header">
						<h:outputText value="#{msg.listadoPaises}"/>
					</f:facet>
					
					<rich:column>
						<f:facet name="header">
							<h:outputText value="#{msg.numeral}" />
						</f:facet>
						<h:outputText value="#{rowKey+1}"></h:outputText>
					</rich:column>
					
					<rich:column  >
						<f:facet name="header">
							<h:outputText value="#{msg.id}" />
						</f:facet>
						<h:outputText value="#{item.getNIdPaisPk()}"></h:outputText>
					</rich:column>                       
                        
					<rich:column sortBy="#{item.getVNombrePais()}" filterBy="#{item.getVNombrePais()}" filterEvent="onkeyup">
						<f:facet name="header">
							<h:outputText value="#{msg.nombre}" />
						</f:facet>
						<h:outputText value="#{item.getVNombrePais()}"></h:outputText>
					</rich:column>

					<rich:column sortBy="#{item.getNNumHabitantesPais()}">
						<f:facet name="header">
							<h:outputText value="#{msg.numhabitantes}"/>
						</f:facet>
						<h:outputText value="#{item.getNNumHabitantesPais()}"></h:outputText>
					</rich:column>				
                                     
					<f:facet name="footer">
						<h:outputText value="#{msg.listan} #{msg.totalregistros} : #{consultasPaisesController.numPaises}" />     
					</f:facet>
                        
                        
				</rich:dataTable>			  
		
		 </h:panelGrid>              
                 <!-- fin DataTable-->               
               </rich:panel> 		
            </a4j:form>	        
        </f:view>
    </ui:define>
  
  

</ui:composition>

</html>
 